<template>
    <div class="menu">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide>
          <div class="menu-con">
            <ul>
              <li v-for="li in list">
                <a>
                  <span class="iconfont li-icon" :class="li.icon" :style="{background:li.backColor}"></span>
                  <span class="z">{{li.name}}</span>
                </a>
              </li>
            </ul>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="menu-con">
            <ul>
              <li v-for="li in list">
                <a>
                  <span class="iconfont li-icon" :class="li.icon" :style="{background:li.backColor}"></span>
                  <span class="z">{{li.name}}</span>
                </a>
              </li>
            </ul>
          </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>

      <!--
      -->
    </div>
</template>


<script>

    export default {
        name: "Menu",
        props:{
          list:Array
        },
      data(){
        return {
          swiperOption: {
           pagination:{
             el:'.swiper-pagination',
             clickable:true
           }
          }
        }
      }

    }
</script>

<style lang="stylus" scoped>
  //改变原点颜色
  .menu>>>.swiper-pagination-bullet-active
    background-color #fe8c00 !important
  .menu
    height 1.81rem
    ul
      display flex
      flex-wrap wrap
      li
        height 1%rem
        width 20%
        text-align center
        padding-top .2rem
        .li-icon
          font-size .3rem
          height .55rem
          width .55rem
          border-radius .5rem
          display block
          margin-left 39%
          line-height .55rem
          text-align center
        .z
         font-size .2rem
         margin-left 15%
         text-align center

</style>
